<template>
  <div>
    <div id="header">
      <van-nav-bar title="主页" />
    </div>
    <van-row type="flex" justify="center">
      <van-col span="22">
        <div>
          <van-grid :gutter="10">
            <van-grid-item
              v-for="(item,index) in items"
              :key="index"
              :text="item.text"
              :icon="item.icon"
              :to="item.to"
            />
          </van-grid>
        </div>
      </van-col>
    </van-row>
  </div>
</template>
<script>
import { NavBar, Grid, GridItem, Divider, Row, Col } from "vant";

export default {
  name: "home",
  components: {
    [Grid.name]: Grid,
    [GridItem.name]: GridItem,
    [NavBar.name]: NavBar,
    [Divider.name]: Divider,
    [Row.name]: Row,
    [Col.name]: Col
  },
  data() {
    const _items = [
      {
        text: "图表",
        icon: "photo-o",
        to: "/chart"
      },
      {
        text: "菜单2",
        icon: "photo-o",
        to: "/"
      },
      {
        text: "菜单3",
        icon: "photo-o",
        to: "/"
      },
      {
        text: "菜单4",
        icon: "photo-o",
        to: "/"
      },
      {
        text: "菜单5",
        icon: "photo-o",
        to: "/"
      },
      {
        text: "菜单6",
        icon: "photo-o",
        to: "/"
      },
      {
        text: "菜单7",
        icon: "photo-o",
        to: "/"
      },
      {
        text: "菜单8",
        icon: "photo-o",
        to: "/"
      }
    ];
    return {
      items: _items
    };
  }
};
</script>
